import { CoverView, CoverImage} from "@tarojs/components";
import { Component, CSSProperties } from "react";
import Taro from '@tarojs/taro'
import Global from "../lib/global";

import './index.scss'
import { connect } from "react-redux";
import { State } from "../dva/state";
import { TabbarState } from "../dva/models/tabbar";

interface CustomTabBarItemConfig {
    pagePath: string,
    text: string,
    iconPath: string,
    selectedIconPath: string
}

interface CustomTabBarProps {
    tabbar: TabbarState,
    dispatch: any
}

let titleStyle: CSSProperties = {
    fontSize: "9px",
    color: "#666666",
    marginTop: "5px",

}

let titleSelectedStyle: CSSProperties = {
    fontSize: "9px",
    color: "#444444",
    fontWeight: 600,
    marginTop: "5px",
}

let items: CustomTabBarItemConfig[] = [
    {
        pagePath: '/pages/home/index',
        text: "首页",
        iconPath: '/resources/static/index@3x.png',
        selectedIconPath: '/resources/static/indexSelect@3x.png'
    },
    {
        pagePath: '/pages/products/index',
        text: "全部商品",
        iconPath: '/resources/static/all@3x.png',
        selectedIconPath: '/resources/static/allSelect@3x.png'
    },
    {
        pagePath: '/pages/shopcart/index',
        text: "购物车",
        iconPath: '/resources/static/car@3x.png',
        selectedIconPath: '/resources/static/carSelect@3x.png'
    },
    {
        pagePath: '/pages/mycenter/index',
        text: "我的",
        iconPath: '/resources/static/my@3x.png',
        selectedIconPath: '/resources/static/mySelect@3x.png'
    }
]

class CustomTabBar extends Component<CustomTabBarProps, {}> {

    

    switchTab = (item: CustomTabBarItemConfig, index: number) => {
        const { dispatch, tabbar } = this.props
        if (tabbar.selectedIndex == index) {
            return
        }
        
        dispatch({
            type: "tabbar/setSelectedIndex",
            payload: index
        })

        Taro.switchTab({url: item.pagePath})    
    }

    render() {
        const { selectedIndex } = this.props.tabbar

        return (
            <CoverView className="custom-bar" style={{ height: `calc(60px + ${Global.shared.safeBottom}px)`}}>
                <CoverView className="custom-bar-warp" style={{ height: "60px" }}>
                    { items.map((item, idx) => {
                        let isSelected = idx == selectedIndex

                        return (
                            <CoverView className="custom-bar-item" onClick={ () => this.switchTab(item, idx) }>

                                <CoverView className="custom-bar-item-img-warp" style={{ width: "23px", height: "23px"}}>
                                    <CoverImage className="custom-bar-item-img" style={{ width: "23px", height: "23px", display: isSelected ? "none" : "block" }} src={ item.iconPath }/>
                                    <CoverImage className="custom-bar-item-img" style={{ width: "23px", height: "23px", display: isSelected ? "block" : "none" }} src={ item.selectedIconPath }/>
                                </CoverView>

                                <CoverView className="custom-bar-item-title"  style={ isSelected ? titleSelectedStyle : titleStyle }>{ item.text }</CoverView>
                            </CoverView>
                        )
                    }) }
                </CoverView>
            </CoverView>
        )
    }
}

export default connect((state: State) => ({ tabbar: state.tabbar }))(CustomTabBar)